<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>觅景404</title>
    <link href="../static/css/404.css" rel="stylesheet" type="text/css"/>
    <script src="../static/js/ku/jquery-3.3.1.min.js"></script>

    <style>
        body{
            background: #f1f1f1;
        }

        .tekst {
            color: #505050;
            margin: 0;
            padding: 0;
            font-family: 'Lato', arial, sans-serif;
            text-transform: uppercase;
            font-size: 14px;
            line-height: 28px;
            font-weight: bold;
            display: block;
            letter-spacing: 2px;
            max-width: 100%;
            text-align: center;
            position: absolute;
            bottom: 20px;
            left: 30px;
            z-index: 1
        }

        a {
            color: #fefefe;
            text-decoration: none;
            cursor: pointer
        }

        a:hover {
            text-decoration: underline
        }

        .pozycja {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100%;
            -webkit-transform: translate(-50%, -111px);
            -moz-transform: translate(-50%, -111px);
            -ms-transform: translate(-50%, -111px);
            -o-transform: translate(-50%, -111px);
            transform: translate(-50%, -111px)
        }

        .ludek {
            position: relative;
            width: 200px;
            height: 100%
        }

        .ludek .cialo, .skora {
            position: absolute;
            width: 100%;
            height: 105%;
            top: 0;
            left: 0;
            background: #191919;
            border-radius: 200px 200px 0 0;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -webkit-transform-origin: bottom center;
            -moz-transform-origin: bottom center;
            -ms-transform-origin: bottom center;
            -o-transform-origin: bottom center;
            transform-origin: bottom center
        }

        .ludek .skora {
            overflow: hidden
        }

        .ludek .cialo .ucho {
            position: absolute;
            top: 80px;
            width: 45px;
            height: 45px;
            background: #191919;
            border-radius: 45px
        }

        .ludek .cialo .ucho.lewe {
            left: -10%
        }

        .ludek .cialo .ucho.prawe {
            right: -10%
        }

        .ludek .oko {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 85px;
            background: #fefefe;
            border-radius: 50%;
            z-index: 1
        }

        .ludek .oko.lewe {
            left: 47px
        }

        .ludek .oko.prawe {
            left: 103px
        }

        .ludek .oko .zrenica {
            width: 15px;
            height: 15px;
            position: absolute;
            top: 18px;
            left: 18px;
            background: #191919;
            border-radius: 50%
        }

        .ludek .powieka_gorna {
            width: 70%;
            height: 30px;
            position: absolute;
            top: 50px;
            left: 15%;
            background: #191919;
            border-radius: 30px 30px 0 0;
            z-index: 3
        }

        .ludek .powieka_dolna {
            width: 70%;
            height: 30px;
            position: absolute;
            top: 140px;
            left: 15%;
            background: #191919;
            border-radius: 0 0 30px 30px;
            z-index: 3
        }

        .ludek .usta {
            width: 80%;
            height: 32px;
            position: absolute;
            top: 145px;
            left: 10%;
            background: #fefefe;
            border-radius: 32px;
            z-index: 4
        }

        .tipInfo {
            background: #69fff2;
            position: absolute;
            top: 30%;
            left: 70%;
            border-radius: 10px;
        }

        .textThis, .in {
            background: white;
            margin: 20px;
        }

        .tipInfo * {
            background: #69fff2;
        }

    </style>
</head>
<body>
<div id="mydiv" style="height:900px;"></div>
<script type="text/javascript">
    window.onload = function () {
        //配置
        var config = {
            vx: 3,	//小球x轴速度,正为右，负为左
            vy: 3,	//小球y轴速度
            height: 2,	//小球高宽，其实为正方形，所以不宜太大
            width: 2,
            count: 400,		//点个数
            color: "24 24 24", 	//点颜色
            stroke: "50,50,50", 		//线条颜色
            dist: 6000, 	//点吸附距离
            e_dist: 20000, 	//鼠标吸附加速距离
            max_conn: 10 	//点到点最大连接数
        };

        //调用
        CanvasParticle(config);
    }
</script>
<script type="text/javascript" src="../static/js/canvas-particle.js"></script>
<div>
    <div class="pozycja">
        <div class="ludek">
            <div class="cialo">
                <div class="ucho lewe"></div>
                <div class="ucho prawe"></div>
                <div class="skora">
                    <div class="oko lewe"><span class="zrenica"></span></div>
                    <div class="oko prawe"><span class="zrenica"></span></div>
                    <div class="powieka_gorna"></div>
                    <div class="powieka_dolna"></div>
                    <div class="usta"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var tarcie = (1 / 6);
        var cialo_x = 0,
            cialoRuchX = 0,
            uszy_x = 0,
            uszy_y = 0,
            uszyRuchX = 0,
            uszyRuchY = 0,
            zrenica_x = 0,
            zrenica_y = 0,
            zrenicaRuchX = 0,
            zrenicaRuchY = 0,
            oko_x = 0,
            oko_y = 0,
            okoRuchX = 0,
            okoRuchY = 0,
            powieka_gorna_x = 0,
            powieka_gorna_y = 0,
            powiekaGornaRuchX = 0,
            powiekaGornaRuchY = 0,
            powieka_dolna_x = 0,
            powieka_dolna_y = 0,
            powiekaDolnaRuchX = 0,
            powiekaDolnaRuchY = 0,
            usta_x = 0,
            usta_y = 0,
            ustaRuchX = 0,
            ustaRuchY = 0;

        function animacja() {
            cialo_x += (cialoRuchX - cialo_x) * tarcie;
            $('.cialo').css({
                '-webkit-transform': 'rotate(' + -cialo_x + 'deg)',
                'transform': 'rotate(' + -cialo_x + 'deg)'
            });
            uszy_x += (uszyRuchX - uszy_x) * tarcie;
            uszy_y += (uszyRuchY - uszy_y) * tarcie;
            if (uszy_x < 0) {
                $('.ucho.lewe').css({
                    '-webkit-transform': 'translate(' + -uszy_x * 7 + 'px, ' + -uszy_y + 'px)',
                    'transform': 'translate(' + -uszy_x * 7 + 'px, ' + -uszy_y + 'px)'
                });
                $('.ucho.prawe').css({
                    '-webkit-transform': 'translate(' + -uszy_x + 'px, ' + -uszy_y + 'px)',
                    'transform': 'translate(' + -uszy_x + 'px, ' + -uszy_y + 'px)'
                });
            } else {
                $('.ucho.lewe').css({
                    '-webkit-transform': 'translate(' + -uszy_x + 'px, ' + -uszy_y + 'px)',
                    'transform': 'translate(' + -uszy_x + 'px, ' + -uszy_y + 'px)'
                });
                $('.ucho.prawe').css({
                    '-webkit-transform': 'translate(' + -uszy_x * 7 + 'px, ' + -uszy_y + 'px)',
                    'transform': 'translate(' + -uszy_x * 7 + 'px, ' + -uszy_y + 'px)'
                });
            }
            zrenica_x += (zrenicaRuchX - zrenica_x) * (tarcie * 3);
            zrenica_y += (zrenicaRuchY - zrenica_y) * (tarcie * 3);
            $('.zrenica').css({
                '-webkit-transform': 'translate(' + -zrenica_x + 'px, ' + -zrenica_y + 'px)',
                'transform': 'translate(' + -zrenica_x + 'px, ' + -zrenica_y + 'px)'
            });
            oko_x += (okoRuchX - oko_x) * tarcie;
            oko_y += (okoRuchY - oko_y) * tarcie;
            if (oko_x < 0) {
                $('.oko.lewe').css({
                    'z-index': '2',
                    '-webkit-transform': 'translate(' + -oko_x * 2 + 'px, ' + -oko_y + 'px)',
                    'transform': 'translate(' + -oko_x * 2 + 'px, ' + -oko_y + 'px)'
                });
                $('.oko.prawe').css({
                    'z-index': '1',
                    '-webkit-transform': 'translate(' + -oko_x + 'px, ' + -oko_y + 'px)',
                    'transform': 'translate(' + -oko_x + 'px, ' + -oko_y + 'px)'
                });
            } else {
                $('.oko.prawe').css({
                    'z-index': '2',
                    '-webkit-transform': 'translate(' + -oko_x * 2 + 'px, ' + -oko_y + 'px)',
                    'transform': 'translate(' + -oko_x * 2 + 'px, ' + -oko_y + 'px)'
                });
                $('.oko.lewe').css({
                    'z-index': '1',
                    '-webkit-transform': 'translate(' + -oko_x + 'px, ' + -oko_y + 'px)',
                    'transform': 'translate(' + -oko_x + 'px, ' + -oko_y + 'px)'
                });
            }
            powieka_gorna_x += (powiekaGornaRuchX - powieka_gorna_x) * tarcie;
            powieka_gorna_y += (powiekaGornaRuchY - powieka_gorna_y) * tarcie;
            $('.powieka_gorna').css({
                '-webkit-transform': 'translate(' + -powieka_gorna_x + 'px, ' + -powieka_gorna_y + 'px)',
                'transform': 'translate(' + -powieka_gorna_x + 'px, ' + -powieka_gorna_y + 'px)'
            });
            powieka_dolna_x += (powiekaDolnaRuchX - powieka_dolna_x) * tarcie;
            powieka_dolna_y += (powiekaDolnaRuchY - powieka_dolna_y) * tarcie;
            $('.powieka_dolna').css({
                '-webkit-transform': 'translate(' + -powieka_dolna_x + 'px, ' + -powieka_dolna_y + 'px)',
                'transform': 'translate(' + -powieka_dolna_x + 'px, ' + -powieka_dolna_y + 'px)'
            });
            usta_x += (ustaRuchX - usta_x) * tarcie;
            usta_y += (ustaRuchY - usta_y) * tarcie;
            $('.usta').css({
                '-webkit-transform': 'translate(' + -usta_x + 'px, ' + -usta_y + 'px)',
                'transform': 'translate(' + -usta_x + 'px, ' + -usta_y + 'px)'
            });
            window.requestAnimationFrame(animacja);
        }

        $(window).on('mousemove click', function (e) {
            var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
            var lMouseY = Math.max(-100, Math.min(100, ($(window).height() / 2) - e.clientY));
            cialoRuchX = (5 * lMouseX) / 200;
            uszyRuchX = (3 * -lMouseX) / 100;
            uszyRuchY = (10 * -lMouseY) / 100;
            zrenicaRuchX = (25 * lMouseX) / 200;
            zrenicaRuchY = (13 * lMouseY) / 100;
            okoRuchX = (20 * lMouseX) / 100;
            if (lMouseY <= 0) {
                okoRuchY = (10 * lMouseY) / 100;
                powiekaDolnaRuchY = (25 * lMouseY) / 100;
            } else {
                okoRuchY = (30 * lMouseY) / 100;
                powiekaDolnaRuchY = (55 * lMouseY) / 100;
            }
            powiekaGornaRuchX = (25 * lMouseX) / 100;
            powiekaGornaRuchY = (35 * lMouseY) / 100;
            powiekaDolnaRuchX = (25 * lMouseX) / 100;
            ustaRuchX = (35 * lMouseX) / 100;
            ustaRuchY = (10 * lMouseY) / 100;
        });

        animacja();
    });</script>

<div class="tipInfo">
    <div class="in">
        <div class="textThis">
            <img src="../static/img/logo1.png" alt="">
            <h2>网页去旅行啦404！</h2>
            <p><span>页面自动<a id="href" href="/homepage/" style="color: blue">跳转</a></span><span>等待<b id="wait">5</b>秒</span>
            </p>
            <script type="text/javascript">                            (function () {
                var wait = document.getElementById('wait'), href = document.getElementById('href').href;
                var interval = setInterval(function () {
                    var time = --wait.innerHTML;
                    if (time <= 0) {
                        clearInterval(interval);
                        //location.href = href;
                        window.location.href = '/homepage/'
                    }
                }, 1000);
            })();
            </script>
        </div>
    </div>
</div>
</div>

</body>
</html>
